<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap-pagination.css" rel="stylesheet">
	<link href="bootstrap.min.css" rel="stylesheet">
	<link href="bootstrap-select.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<link href="../js/layui/css/layui.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/popper.min.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/layui/layui.js"></script>
	<style>
		.layui-disabled, .layui-disabled:hover {
		    cursor: pointer;
		}
		.layui-form-label {
			width: 100px;
		}
		.layui-form-item .layui-input-inline {
		    width: 220px;
		}
		.layui-form-item {
		    margin-bottom: 0px;
		}
		#multi ul {
			width: 100%;
		}
		#multi li {
			height: 26px;
			width: 32%;
			float: left;
			display: block;
			font-size: 14px;
			border-radius: 5px;
			margin-right: 5px;
			padding-left: 7px;
			line-height: 26px;
			cursor: pointer;
		}
		.li_active{
		   background-color: rgba(0, 106, 222, 1);
		   color: white;
		}
		.layui-input-block {
			line-height: 36px;
			margin-left: 100px;
		}
		.layui-input-block label {
			font-weight: normal;
		}
		input[type=radio] {
			margin-left: 10px;
			margin-right: 3px;
		}
		#multiAllCheck li,#multiNoCheck li,#multiCheck ul {
			width: 100%;
		}
		#multiAllCheck li,#multiNoCheck li,#multiCheck li {
			height: 26px;
			width: 18%;
			float: left;
			display: block;
			font-size: 14px;
			border-radius: 5px;
			margin-right: 5px;
			margin-top: 15px;
			padding-left: 7px;
			line-height: 26px;
			cursor: pointer;
		}
		.muli_active{
		   color: #0079FE;
		}
		.selBtn {
			margin-left:5px;
			margin-right:5px;
			height:30px;
			width:70px;
			background-color:#1890FF;
			border-radius:5px;
			border: 0px;
			color:white;
		}
		.selBtn:hover {
			background-color: #00BFFF;
		}
		#lineNameDiv .open {
			z-index: 10000;
		}
		.layui-input-block label {
			cursor: pointer;
		}
		/* .bootstrap-select .dropdown-menu.inner{
			max-height: 230px;
		} */
		
	</style>
	<script type="text/javascript">
		var table = null;
		var scheme = null;
		var treeCode = null;
		//var dataCode = '20101';
		var projectId =  '88888888888';
		var dataCode =  '88888888888';
		var arrData = [];
		var totalSize = 0;
		$(function(){
			//scheme = parent.getSelectScheme();
			//加载树组件
			projectId =  getQueryString("projectId")||'88888888888';
			dataCode =  getQueryString("dataCode")||'88888888888';
			var tabNum = 0;

			layui.use(['dropdown','laydate', 'util', 'layer'], function(){
			  var dropdown = layui.dropdown,
			      laydate = layui.laydate,
			  	  util = layui.util,
			  	  layer = layui.layer;
			  
			  var content = '<ul><li class="li_active">输送电量</li>'
			  			  + '<li>损失电量</li>'
			  			  + '</ul>';

			  dropdown.render({
			    elem: '#selIndex'
			    ,content: ['<div class="layui-tab layui-tab-brief">'
			      ,'<ul class="layui-tab-title">'
			        ,'<li class="layui-this">全部</li>'
			      ,'</ul>'
			      ,'<div class="layui-tab-content">'
			        ,'<div id="multi" class="layui-tab-item layui-text layui-show">'+content+'</div>'
			      ,'</div>'
			    ,'</div>'].join('')
			    ,style: 'width: 300px; height: 150px; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);'
			    ,ready: function(){
					layui.use('element', function(element){
						element.render('tab');
						tabNum++;
					});
					  var Uarray = $("#multi li");
			    	if(tabNum > 0){
			    		var value = $("#selIndex").val();
		          	  $.each(Uarray,function(i ,o){
		                  $(o).removeClass("li_active");
		              });
		              $("#multi li:contains('"+ value +"')").addClass("li_active");
			    	}
			      $("#multi li").click(function(){
		              $.each(Uarray,function(i ,o){
		                  $(o).removeClass("li_active");
		              });
		              $(this).addClass("li_active");
		              var crr = $(this).index();
		              var v = Uarray.eq(crr).text();
		              $("#selIndex").val(v);
			      });
			    }
			  });

			  $.ajax({
		      	type:"POST",
		      	url:"../pv/page/getDesdDay",
		      	data:{"projectid":projectId},
		        success:function(data){
				  laydate.render({
				    elem: '#startDate'
				  	,value: data.BEGINDAY
				  });
				  laydate.render({
				    elem: '#endDate'
				  	,value: data.ENDDAY
				  });
				  laydate.render({
				    elem: '#timeFrame'
				    //设置开始日期、日期日期的 input 选择器
				    ,range: ['#startDate', '#endDate']
				  });
		        }
		      });
			  $("input[name='statType']").click(function(){
				  if($(this).val() == "line") {
					  $("#lineNameDiv").css("display","");
				  } else {
					  $("#lineNameDiv").css("display","none");
				  }
			  });
			});
			getSelectDatas();
		})
		
		function onTreeEvent(event){
			console.log("onTreeEvent");
			$("#table").css("display","block");
			$("#operate").css("display","block");
			$("#iframe").css("display","none");
			//treeCode = data.code;
			JyyLoading.start();
			$.when(getTableData(dataCode)).done(function(tableData){
				totalSize = tableData.page.option.totalSize;
				if(table == null){
					table = JyyTable.init("table", tableData, {position:"absolute",top:"50px",left:"5px",right:"5px",bottom:"0px",overflow:"hidden"}, onTableEvent);
				}else{
					table.refresh(tableData);
				}
				JyyLoading.end();
			});
		}
		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}
		
		function onTableEvent(type, value){
			console.log("onTableEvent");
			var code = dataCode;
			if(type == "insertBefore"){
				console.log("insertBefore");
				//核查数据正确性
				for(var a = 0 ; a < value[1].length; a++){
					if(table.config.hideCols.indexOf(a) <= -1){
						if(JyyCommon.isEmpty(value[1][a])){
							JyyMsgBox.alert({ title:"警告", message:"["+table.config.data[0][a-1].name+"]不可为空",type:"warning"}).on(function (e) {});
							return false;
						}else if((!JyyCommon.isObject(value[1][a]) && value[1][a].indexOf("请选择")>-1) || value[1][a] == " "){
							JyyMsgBox.alert({ title:"警告", message:"["+table.config.data[0][a-1].name+"]下拉框未做选择",type:"warning"}).on(function (e) {});
							return false;
						}else if(JyyCommon.isObject(value[1][a]) && JyyCommon.isEmpty(value[1][a].name)){
							JyyMsgBox.alert({ title:"警告", message:"["+table.config.data[0][a-1].name+"]不可为空",type:"warning"}).on(function (e) {});
							return false;
						}
					}
				}
				return true;
			} else if(type == "data"){
				JyyLoading.start();
 				 $.ajax({
		            type:"POST",
		            url:"../pv/page/check/"+code,
		            data:{"value":JSON.stringify(value),"projectid":parent.planId},
		      //      contentType:"application/json", 
		            success:function(data){
						$.when(getTableData(code, 1, pageSize, $("#term").val())).done(function(tableData){
							totalSize = tableData.page.option.totalSize;
							table.refresh(tableData);
							JyyLoading.end();
						});
		            }
		        }); 
			} else if(type == "page"){
				console.log("page");
				JyyLoading.start();
				$.when(getTableData(code, value.currentPage, value.pageSize)).done(function(tableData){
					totalSize = tableData.page.option.totalSize;
					table.refresh(tableData);
					JyyLoading.end();
				});
			}
		}
		//查询
		function select(){
			
			var code = dataCode;
			//var currentPage = table.config.page.option.currentPage;
			var currentPage = 1;
			var pageSize = 20;
			if(table != null) {
				pageSize = table.config.page.option.pageSize;
			}
			JyyLoading.start();
			$.when(getTableData(code, currentPage, pageSize)).done(function(tableData){
				totalSize = tableData.page.option.totalSize;
				if(table == null){
					table = JyyTable.init("table", tableData, {position:"absolute",top:"150px",left:"5px",right:"5px",bottom:"0px",overflow:"hidden"}, onTableEvent);
				}else{
					table.refresh(tableData);
				}
				JyyLoading.end();
			});
		}
		//重置
		function reset(){
			arrData = [];
			$("#selIndex").val("输送电量");
			$("#startDate").val("");
			$("#endDate").val("");
	        $("input:radio[name=frequen]").eq(0).prop("checked",'checked');
	        $("input:radio[name=statType]").eq(0).prop("checked",'checked');
			$("#lineNames").selectpicker('val', '');
			$("#lineNameDiv").css("display","none");
		}
		function  doSave_(){
			com.qh.goptcloud.RouteMap.prototype.doSave();
		};
		function getTableData(code, currentPage, pageSize, keyword){
			var defer = $.Deferred();
			var result = null;
			var selIndex = $("#selIndex").val();
			var re = new RegExp("-","g");
			var startDate = $("#startDate").val().replace(re, "");
			var endDate = $("#endDate").val().replace(re, "");
			var frequen = $("input[name=frequen]:checked").val();
			var statType = $("input[name=statType]:checked").val();
			var lineNames = $("#lineNames").selectpicker('val');
			if(startDate == "" || startDate == null || endDate == "" || endDate == null) {
				JyyMsgBox.alert({ title:"警告", message:"起始日期和终止日期不可为空！",type:"warning"}).on(function (e) {});
				JyyLoading.end();
				return false;
			}

			$.ajax({
				dataType: "json",
				async:true,
				traditional: true,
				data:{"pagenow":currentPage,"pagenum":pageSize,"projectid":projectId,
					  "selIndex":selIndex,"startDate":startDate,"endDate":endDate,"frequen":frequen,
					  "statType":statType,"lineNames":lineNames},
				url: "../pv/page/pageInfo/"+code
			}).done(function(res) {
				var sts=eval("("+res+")");
				result = sts;
				defer.resolve(sts);
			});
			return defer.promise();
		}

		//下载按钮
		function download(){
			if(totalSize > 1000000) {
				JyyMsgBox.alert({ title:"警告", message:"记录数超过100万请重新筛选！",type:"warning"}).on(function (e) {});
				return false;
			}
			var re = new RegExp("-","g");
			var startDate = $("#startDate").val().replace(re, "");
			var endDate = $("#endDate").val().replace(re, "");
			if(startDate == "" || startDate == null || endDate == "" || endDate == null) {
				JyyMsgBox.alert({ title:"警告", message:"起始日期和终止日期不可为空！",type:"warning"}).on(function (e) {});
				return false;
			}
			var form = $('<form action="../pv/pageExcel/downloadExcel/'+ dataCode +'" style="display:none" method="post">');
			var input = $('<input type="hidden" name="projectid">');
			input.attr("value",projectId);
			var input1 = $('<input type="hidden" name="selIndex">');
			input1.attr("value",$("#selIndex").val());
			var input2 = $('<input type="hidden" name="startDate">');
			input2.attr("value", startDate);
			var input3 = $('<input type="hidden" name="endDate">');
			input3.attr("value", endDate);
			var input4 = $('<input type="hidden" name="frequen">');
			input4.attr("value",$("input[name=frequen]:checked").val());
			var input5 = $('<input type="hidden" name="statType">');
			input5.attr("value",$("input[name=statType]:checked").val());
			var input6 = $('<input type="hidden" name="selectStr">');
			input6.attr("value",$("#lineNames").selectpicker('val').join(","));
			form.append(input);
			form.append(input1);
			form.append(input2);
			form.append(input3);
			form.append(input4);
			form.append(input5);
			form.append(input6);
			$("body").append(form);
			form.submit();
			form.remove();
		}
		function getSelectDatas(){
			$.ajax({
				url: "../g/service/Sample/getLineList",
				type:'POST',
				async:false,
				dataType: "json",
				data:JSON.stringify({ "projectId":projectId }),
				contentType:"application/json",
		        success:function(data){
					var content = '';
					$.each(data.list,function(i,n){
						if(i == 0){
							content += "<option value='" + n.id + "' selected>"+ n.name +"</option>";
						} else {
							content += "<option value='" + n.id + "'>"+ n.name +"</option>";
						}
					});
					$("#lineNames").html(content);
					if(content != '')$("#lineNames").selectpicker('refresh');
		        }
			});
		}
	</script>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;">
	<div id="operate" style="position: absolute;top: 0px;left: 5px;right: 0px;height: 50px;">
		<div class="col-md-12" style="position: absolute;top: 10px;padding-left: 5px;padding-right: 5px;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">查询指标：</label>
					<div class="layui-input-inline">
	      				<input readonly type="text" id="selIndex" style="cursor: pointer;" placeholder="请选择指标" autocomplete="off" class="layui-input" value="输送电量">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">时间范围：</label>
					<div class="layui-inline" id="timeFrame">
						<div class="layui-input-inline">
							<input type="text" autocomplete="off" id="startDate" style="cursor: pointer;" class="layui-input" placeholder="开始日期">
			        	</div>
			        	<div class="layui-form-mid">-</div>
			        	<div class="layui-input-inline">
			          		<input type="text" autocomplete="off" id="endDate" style="cursor: pointer;" class="layui-input" placeholder="结束日期">
			        	</div>
			      	</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">统计频度：</label>
					<div class="layui-input-block">
						<label><input type="radio" name="frequen" value="year" title="年" checked>年</label>
						<label><input type="radio" name="frequen" value="month" title="月">月</label>
						<label><input type="radio" name="frequen" value="day" title="日">日</label>
						<label><input type="radio" name="frequen" value="time" title="点">点</label>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">统计分类：</label>
					<div class="layui-input-block">
						<label><input type="radio" name="statType" value="time" title="时间" checked>时间</label>
						<label><input type="radio" name="statType" value="line" title="线路">线路</label>
					</div>
				</div>
				<div id="lineNameDiv" class="layui-inline" style="display: none;z-index: 9999;">
					<div class="layui-input-inline" style="width: 300px;">
	      				<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
						id="lineNames" title="请选择线路" data-none-results-text="未找到相关线路{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
						data-width="250px" data-size="10" data-count-selected-text="已选择{1}个线路中的{0}个"></select>
					</div>
				</div>
			</div>
			<button class="selBtn" style="float: right;" onclick=reset()>重置</button>
			<button class="selBtn" style="float: right;" onclick=select()>查询</button>
			<button class="selBtn" style="float: right;width: 100px;" onclick=download()><i class="glyphicon glyphicon-download"></i>导出Excel</button>
		</div>
	</div>
	<div id="tree" style="display: none;"></div>
	<div id="table"></div>
	<div id="iframe" style="position: absolute;top: 0px;left: 200px;right: 0px;height: 820px;display:none">
		<iframe  frameborder="0" width="100%" scrolling="No" height="100%" leftmargin="0" topmargin="0" id="sampleIframe"></iframe>
	</div>
</body>
</html>